<template>
  <div class="app-container">
    <div class="search-container">
      <el-form ref="queryFormRef" :model="queryParams" :inline="true">
        <el-form-item label="考勤月份" prop="month">
          <el-date-picker
            v-model="queryParams.month"
            type="month"
            placeholder="请选择考勤月份"
            :disabled-date="disabledDate"
            @change="changeMonth"
          />
        </el-form-item>
        <el-form-item label="关键字" prop="keywords">
          <el-input
            v-model="queryParams.keywords"
            placeholder="请输入关键字"
            clearable
            style="width: 200px"
            @keyup.enter="handleQuery"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="handleQuery"><i-ep-search />搜索</el-button>
          <el-button @click="resetQuery">
            <i-ep-refresh />
            重置</el-button
          >
        </el-form-item>
      </el-form>
    </div>

    <el-card shadow="never">
      <el-form-item>
        <el-button type="primary" :loading="download_loading" @click="download()"><i-ep-download />导出</el-button>
      </el-form-item>
      <el-table v-loading="loading" :data="tableList" size="small">
        <el-table-column key="personName" label="人员姓名" min-width="80" align="center" prop="personName" />
        <el-table-column key="groupName" label="班组" min-width="100" align="center" prop="groupName" />
        <el-table-column
          key="isManager"
          label="工种(岗位名称)"
          min-width="120"
          align="center"
          prop="isManager"
          :formatter="(row) => (row.isManager ? row.postCategoryName : row.typeName)"
        />
        <el-table-column min-width="1300" align="center">
          <template #header>
            <el-text v-for="item in moment(queryParams.month).daysInMonth()" :key="item" class="checkin-day">
              {{ item }} 号
            </el-text>
            <el-divider />
            <el-text v-for="item in moment(queryParams.month).daysInMonth()" :key="item" class="checkin-day">
              {{ formatWeeks(moment(queryParams.month + "-" + item).day()) }}
            </el-text>
          </template>
          <template #default="{ row }">
            <el-text
              v-for="item in moment(queryParams.month).daysInMonth()"
              :key="item"
              :type="row.checkInDays?.findIndex((i: number) => i == item) > -1 ? `success` : ``"
              class="checkin-day"
            >
              <svg-icon v-if="row.checkInDays?.findIndex((i: number) => i == item) > -1" icon-class="circlefull" />
            </el-text>
          </template>
        </el-table-column>

        <el-table-column key="workHours" label="时长总计(小时)" min-width="120" align="center" prop="workHours" />
        <el-table-column key="checkinDay" label="天数总计(天)" min-width="120" align="center" prop="checkinDay" />
      </el-table>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, computed } from "vue";
import moment from "moment";
import { QueryPersonMonthDetailWorker } from "@/api/checkin/index";
import { useScreen } from "@/store/modules/screen";
import { downloadFile } from "@/utils";
const props = defineProps({
  id: {
    type: Number,
    default: 0,
  },
});
const { id } = toRefs(props);

const loading = ref(false);
const queryFormRef = ref(ElForm);
const queryParams = reactive({
  month: new Date().toISOString().substr(0, 7), // 当前年月
  projectId: 0,
  keywords: "",
});

const tableList = ref();

const formatWeeks = (val: number) => {
  switch (val) {
    case 0:
      return "日";
    case 1:
      return "一";
    case 2:
      return "二";
    case 3:
      return "三";
    case 4:
      return "四";
    case 5:
      return "五";
    case 6:
      return "六";
  }
};

const download_loading = ref(false);
const daysInMonth = ref(0);
function download() {
  // download_loading.value = true;
  // exportDetailMonth(queryParams).then((response: any) => {
  //   if (!response.headers["content-disposition"]) {
  //     const decoder = new TextDecoder("utf-8");
  //     const resp = decoder.decode(response.data);
  //     let objResp = JSON.parse(resp);
  //     ElMessage.error(objResp.msg);
  //     download_loading.value = false;
  //     return;
  //   }
  //   downloadFile(response);
  //   download_loading.value = false;
  // });
}

/**
 * 禁用日期
 */
const disabledDate = (time: Date) => {
  return time.getTime() > moment().toDate().getTime();
};

/* 列表查询 */
async function handleQuery() {
  loading.value = true;
  queryParams.projectId = id.value;
  let submitForm = {};
  Object.assign(submitForm, queryParams);
  submitForm.month = queryParams.month.replaceAll("-", "");
  let list = await QueryPersonMonthDetailWorker(submitForm);
  if (list.type === 0) {
    if (list.success) {
      tableList.value = list.data;
    } else {
      ElMessage.error(list.msg);
    }
  } else {
    ElMessage.error(list.msg);
  }
  loading.value = false;
}

function changeMonth(val: string) {
  if (val === null) queryParams.month = "";
  else queryParams.month = moment(val).format("YYYY-MM");
}
/**
 * 重置查询
 */
function resetQuery() {
  queryFormRef.value.resetFields();
  handleQuery();
}
onMounted(() => {
  handleQuery();
});
</script>

<style lang="less" scoped>
:deep(.addform .el-dialog__body) {
  height: var(--mobileAddFormHeight);
  overflow-y: auto;
}

td {
  text-align: center;
  font-size: 14px;
  text-align: center;
  font-family: Microsoft Yahei;
  font-family: Roboto !important;
  border: 1px solid #bbbbbb;
  border-collapse: collapse;
}

.div-title {
  border: 1px solid #bbbbbb;
}

.table {
  border-collapse: collapse;
  border: 0px solid #bbbbbb;
  width: 490px;
  margin: auto;
  margin-top: 10px;
  background: #ffffff;
}
.checkin-day {
  margin-right: 5px;
  width: 35px;
  display: inline-block;
}

:deep(.el-divider--horizontal) {
  margin: 0;
  border-color: #bbbbbb;
}
</style>
